<template>
  <div>
    <div style="padding-top: 20px; margin-left: 40px;" v-if="MuchShow==false">

      <el-row :gutter="24">
        <el-form-item label="账户余额:" style="margin-left:20px">
          <el-col :span="12">
            <span style="display: inline-block">{{getBalanceAmount}}</span>
            <span style="width:235px;color: #409eff;margin-left: 20px" @click="capitalClick">资金流水</span>
          </el-col>
        </el-form-item>
      </el-row>
      <div style="width:100%;border-bottom:1px solid #E4E7ED;margin-bottom:30px"></div>

      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="账号类型:">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.bankType | watchBankId}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行类型:" style="margin-left:20px">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{ bankType }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="银行账号:">
            <el-col :span="12">
              <span style="width:235px">{{shopgetinfo.attach.bankNum}}</span>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行预留电话:" style="margin-left:20px">
            <el-col :span="12">
              <span style="width:235px">{{shopgetinfo.attach.bankTelephoneNo}}</span>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="开户名:">
            <el-col :span="12">
              <span style="width:235px">{{shopgetinfo.attach.bankName}}</span>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户人身份证号:" style="margin-left:20px">
            <el-col :span="12">
              <span style="width:235px">{{shopgetinfo.attach.bankCertNo}}</span>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="开户行全称:">
            <el-col :span="12">
              <span style="width:235px;display:inline-block;">{{shopgetinfo.attach.depositBank}}</span>
            </el-col>
          </el-form-item>
        </el-col>

<!--        <el-col :span="12">-->
<!--          <el-form-item label="联行号:" style="margin-left:20px">-->
<!--            <el-col :span="12">-->
<!--              <span style="width:235px">{{shopgetinfo.attach.bankCode}}</span>-->
<!--            </el-col>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="银行卡/开户证明:">
            <el-col :span="12">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.bankinfoPhoto" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.bankinfoPhoto"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.bankinfoPhoto">暂无许可证</span>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>

    </div>
    <el-form style="margin-left: 20px;" v-if="MuchShow==true" label-width="120px" label-position="right">
      <div style="display:flex">
        <el-form-item label="账号类型">
          <el-select  @change="inputClick"   style="width:235px" clearable v-model="shopgetinfo.attach.bankType" placeholder="请选择状态">
            <el-option v-for="item in banktypeoptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行类型:" style="margin-left:20px">
          <el-select @change="inputClick" style="width:235px" v-model="shopgetinfo.attach.bankId" clearable placeholder="请选择">
            <el-option v-for="item in bankoptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item label="银行账号">
          <el-col :span="12">
            <el-input @input="inputClick" v-model="shopgetinfo.attach.bankNum" style="width:235px" />
          </el-col>
        </el-form-item>
        <el-form-item label="银行预留电话" style="margin-left:20px">
          <el-col :span="12">
            <el-input @input="inputClick" v-model="shopgetinfo.attach.bankTelephoneNo" style="width:235px" />
          </el-col>
        </el-form-item>

      </div>
      <div style="display:flex">
        <el-form-item label="开户名">
          <el-col :span="12">
            <el-input @input="inputClick" v-model="shopgetinfo.attach.bankName" style="width:235px" />
          </el-col>
        </el-form-item>
        <el-form-item label="开户人身份证号" style="margin-left:20px">
          <el-col :span="12">
            <el-input @input="inputClick" v-model="shopgetinfo.attach.bankCertNo" style="width:235px" />
          </el-col>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item label="开户行全称">
          <span class="ellipsis-element" style="width:160px;">{{shopgetinfo.attach.depositBank}}</span>
          <el-button @click="tableDatashow">选择</el-button>
        </el-form-item>
<!--        <el-form-item label="联行号" style="margin-left:20px">-->
<!--          <el-col :span="12">-->
<!--            <el-input disabled v-model="shopgetinfo.attach.bankCode" style="width:235px" />-->
<!--          </el-col>-->
<!--        </el-form-item>-->
      </div>
      <div style="display:flex">
        <el-form-item label="银行卡/开户证明">
          <single-upload v-model="shopgetinfo.attach.bankinfoPhoto" style="display: inline-block;" />
        </el-form-item>
      </div>
    </el-form>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="800px">
      <div class="bankName_div">
        <el-input v-model="bankName" style="width:250px" placeholder="请输入名字"></el-input>
        <el-button type="primary" @click="queryBankCodeclick('vague')">查询</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="configName" label="开户行全称">
        </el-table-column>
        <el-table-column prop="configCode" label="联行号">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="slectclick(scope.row)">点击选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="queryBankCodeclick" />
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import { updateMchShop } from "@/api/sysSetUp";
import { list, queryBankCode } from "@/api/bank";
import permission from "@/directive/permission/index.js";
import utils from "@/utils/utils";
import Pagination from "@/components/Pagination";
import singleUpload from "./singleUpload";
import {getBalance} from "@/api/enterprise";
export default {
  components: { singleUpload, Pagination },
  directives: { permission },
  props: {
    shopgetinfo: {
      type: Object,
    },
    MuchShow: {
      type: Boolean,
    },
  },
  data() {
    return {
      dialogVisible: false,
      loading: false, // 按钮防双击
      srcList: [],
      attachmcc: "",
      bankoptions: [],
      banktypeoptions: [
        {
          name: "对公账号",
          id: 0,
        },
        {
          name: "私有账号",
          id: 1,
        },
      ],
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      bankName: "",
      getBalanceAmount: 0,
      bankType:''
    };
  },
  created() {
    this.banklist();
    this.queryBankCodeclick();
    this.getBalance()
  },
  filters: {

    watchBankId(val){
      if (val == 0) {
        return '对公账号'
      } else if (val == 1) {
        return '私有账号'
      }
    }
  },
  watch: {
    shopgetinfo: {
      handler(val, old) {
        if (val.attach) {
          if (typeof val.attach == "string") {
            val.attach = JSON.parse(val.attach);
            if (utils.isNull(val.attach.mcc)) {
              val.attach.mcc = "0";
            }
          }
        } else {
          val.attach = {
            license: "",
            idCardFront: "",
            idCardBack: "",
            thedoor: "",
            food: "",
            scene: "",
          };
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    capitalClick() {
      this.$router.push({
        path: "/sysMch/capitalFlow",
        query: { mchId: this.shopgetinfo.mchId },
      });
    },
    getBalance(data) {
      var _this = this;
      getBalance({ mchId: data }).then((res) => {
        _this.getBalanceAmount = res.data;
      });
    },
    forceRefresh(){
      this.$forceUpdate()
    },
    slectclick(data) {
      console.log(data);
      this.shopgetinfo.attach.depositBank = data.configName;
      this.shopgetinfo.attach.bankCode = data.configCode;
      this.dialogVisible = false;
    },
    tableDatashow() {
      this.dialogVisible = true;
    },
    queryBankCodeclick(type) {
      if(type == 'vague'){
        console.log("321321")
        this.pageNum = 1
      }
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNum);
      params.append("pageSize", this.pageSize);
      params.append("bankName", this.bankName);
      queryBankCode(params).then((res) => {
        this.tableData = res.data.codeInfoList.result;
        this.total = res.data.codeInfoList.totalCount;
      });
    },
    banklist() {
      let params = new URLSearchParams();
      params.append("pageNum", 1);
      params.append("pageSize", 20);
      list(params).then((res) => {
        this.bankoptions = res.data.data;
        this.bankoptions.forEach(item=>{
          if(item.id == this.shopgetinfo.attach.bankId ){
            this.bankType =  item.name
          }
        })
      });
    },
    submit() {
      var _this = this;
      this.loading = true;
      updateMchShop(this.shopgetinfo)
        .then((res) => {
          console.log(res);
          this.loading = false;
          this.$message.success("修改成功");
          _this.$store
            .dispatch("tagsView/delView", _this.$route)
            .then(({ visitedViews }) => {
              _this.$router.push({
                path: "/sysMch/list",
              });
            });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    inputClick(){
      this.$forceUpdate()
    }
  },
};
</script>

<style scoped>

/*/deep/ .el-form-item__label{*/
/*  text-align: left;*/
/*}*/
.bankName_div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.account_item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 30px;
  margin-left: 50px;
}

.account_item_title {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 160px;
  display: block;
}
.shop_img {
  width: 140px;
  height: 140px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-left: 5px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_img_notitle {
  font-size: 14px;
  /*color: #c0c4cc;*/
}
.account_conter_item {
  display: flex;
}

/deep/ label {
  font-weight: 400!important;

}
.ellipsis-element{
  white-space:nowrap;
  text-overflow:ellipsis;
  word-break:break-all;
  overflow:hidden;
}


</style>
